<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>https://codepen.io/nanacodesign/pen/aXQgoj</title>

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/flickity.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.10/flickity.pkgd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.7/howler.js"></script>
</head>
<body>

<div class="loader"></div>
<div class="lock">
    <div class="screen">
        <div class="code">0000</div>
        <div class="status">LOCKED</div>
        <div class="scanlines"></div>
    </div>
    <div class="rows">
        <div class="row">
            <div class="cell">
                <div class="text">0</div>
            </div>
            <div class="cell">
                <div class="text">1</div>
            </div>
            <div class="cell">
                <div class="text">2</div>
            </div>
            <div class="cell">
                <div class="text">3</div>
            </div>
            <div class="cell">
                <div class="text">4</div>
            </div>
            <div class="cell">
                <div class="text">5</div>
            </div>
            <div class="cell">
                <div class="text">6</div>
            </div>
            <div class="cell">
                <div class="text">7</div>
            </div>
            <div class="cell">
                <div class="text">8</div>
            </div>
            <div class="cell">
                <div class="text">9</div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="text">0</div>
            </div>
            <div class="cell">
                <div class="text">1</div>
            </div>
            <div class="cell">
                <div class="text">2</div>
            </div>
            <div class="cell">
                <div class="text">3</div>
            </div>
            <div class="cell">
                <div class="text">4</div>
            </div>
            <div class="cell">
                <div class="text">5</div>
            </div>
            <div class="cell">
                <div class="text">6</div>
            </div>
            <div class="cell">
                <div class="text">7</div>
            </div>
            <div class="cell">
                <div class="text">8</div>
            </div>
            <div class="cell">
                <div class="text">9</div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="text">0</div>
            </div>
            <div class="cell">
                <div class="text">1</div>
            </div>
            <div class="cell">
                <div class="text">2</div>
            </div>
            <div class="cell">
                <div class="text">3</div>
            </div>
            <div class="cell">
                <div class="text">4</div>
            </div>
            <div class="cell">
                <div class="text">5</div>
            </div>
            <div class="cell">
                <div class="text">6</div>
            </div>
            <div class="cell">
                <div class="text">7</div>
            </div>
            <div class="cell">
                <div class="text">8</div>
            </div>
            <div class="cell">
                <div class="text">9</div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="text">0</div>
            </div>
            <div class="cell">
                <div class="text">1</div>
            </div>
            <div class="cell">
                <div class="text">2</div>
            </div>
            <div class="cell">
                <div class="text">3</div>
            </div>
            <div class="cell">
                <div class="text">4</div>
            </div>
            <div class="cell">
                <div class="text">5</div>
            </div>
            <div class="cell">
                <div class="text">6</div>
            </div>
            <div class="cell">
                <div class="text">7</div>
            </div>
            <div class="cell">
                <div class="text">8</div>
            </div>
            <div class="cell">
                <div class="text">9</div>
            </div>
        </div>
    </div>
</div>
<div class="info">
    <p><strong>Super Secret Code</strong>: 1234</p>
    <p>Made with <a href="https://flickity.metafizzy.co/" target="_blank">Flickity</a></p>
</div>
</body>
<script src="script.js" type="module"></script>
</html>